import { Component } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import type { ReportCaseResultDto } from '@/api/insurance/period/types'
import type { VxeColumnSlotTypes } from 'vxe-table'
import { Tag } from 'ant-design-vue'

@Component
export class OperationRecordView extends TableRender {
    noTablePadding = true
    noFilterPadding = true
    filterConfig() {
        return {
            companyId: {
                name: '记录日期',
                element: 'datetime',
            }
        }
    }
    tableColumnConfigOld = () => [
        {
            field: 'id',
            title: '操作属性',
            slots: {
                default: (({ row, column }: VxeColumnSlotTypes.ContentSlotParams) => { 
                    return <div class="text-blue-100">
                        <Tag color="success">加保</Tag>
                    </div>
                })
            }
        },{
            field: 'id',
            title: '数量'
        },{
            field: 'id',
            title:'状态'
        },{
            field: 'id',
            title: '方案名称',
            slots: {
                default: (({ row, column }: VxeColumnSlotTypes.ContentSlotParams) => { 
                    return <div class="text-blue-100">ZD-FD50万超5类</div>
                })
            }
        },{
            field: 'id',
            title:'操作人'
        },{
            field: 'id',
            title:'操作时间'
        },{
            field: 'id',
            title:'操作'
        }
    ] as TableRenderColumnTypes<ReportCaseResultDto>
    render() {
        return (
            <div class="md:flex md:flex-col h-full">
                {this.renderFilter()}
                {this.renderTable()}
                {this.renderPager()}
            </div>
        )
    }
}

export default toNative<{}, {}>(OperationRecordView)